(function(){
    //解析文档完毕触发
    document.addEventListener('DOMContentLoaded',function(){
        var chooseBtn=document.querySelector('.searchBtn')
        console.log(chooseBtn)
    //选择的内容添加一个数组
    var chooseArr=["商品","专辑","艺术家"]
    //暂时不显示
    var isShow=false;




    var chooseListDiv;
    //监听事件
    chooseBtn.addEventListener('click',function(event){
        //冒泡事件？阻止事件向上传递
        event.stopPropagation()
        if(!chooseListDiv){
        //创造一个标签
        var div=document.createElement('div')
        div.className='chooseList'
        chooseArr.forEach(function(item,i){
            //创建一个div 添加一个class名字
            var itemDiv=document.createElement('div')
            itemDiv.className='chooseItem'
            //添加至页面中
            itemDiv.innerHTML=item
            div.appendChild(itemDiv)
        })
        chooseBtn.appendChild(div)
        chooseListDiv=div
        chooseListDiv.style.opacity='0'
        //延迟显示
        setTimeout(function () {
            chooseListDiv.style.opacity='1'
        },0)
        //委托父元素完成选择事件
        div.addEventListener('click',function(event){
            //冒泡事件？阻止事件向上传递
            event.stopPropagation()
            var searchBtnText=document.querySelector('.searchBtn .text')
            //将选择的标签进行替换
            searchBtnText.innerHTML=event.target.innerHTML;
            //点击完成后删除
            // div.parentElement.removeChild(div)
            chooseListDiv.style.opacity='0'
            chooseListDiv.addEventListener('transitionend',function () {
                //隐藏的时候仅是变透明，需要再次进行消失
                chooseListDiv.style.display='none'
            })
            
        })
        document.documentElement.addEventListener('click',function(){
            chooseListDiv.style.display='none'
        })
        }else{
            chooseListDiv.style.display="block"
            chooseListDiv.style.opacity='0'
            //延迟显示
            setTimeout(function () {
                chooseListDiv.style.opacity='1'
            },0)
        }
        
       

    })

    
    })
})()